<template>
    <right-layout :title="title" :visible.sync="show" @closeLayout="closeLayout" class="org-dept">
        <el-form :model="deptInfo" ref="deptInfo" :rules="rules" class="pub-eleform" label-width="160px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门名称：" prop="name">
                        <el-input v-model="deptInfo.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="部门主管：" prop="chargUserIds">
                        <select-user v-model="deptInfo.chargUserIds" :label.sync="deptInfo.chargUserNames" multiple></select-user>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门职责：" prop="descr">
                        <el-input type="textarea" :rows="4" v-model="deptInfo.descr"></el-input>
                        <text-length v-model="deptInfo.descr" :length.sync="deptInfo.descr_l" :max="256"></text-length>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门编号：" prop="code">
                        <el-input v-model="deptInfo.code"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门类型：" prop="deptType">
                        <select-para :options="sysParaObj['SP_ORG_TYPE']" v-model="deptInfo.deptType" :label.sync="deptInfo.deptTypeName"></select-para>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="办公地址：" prop="regAddress">
                        <el-input v-model="deptInfo.regAddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="办公电话：">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item prop="telZone">
                                <el-input v-model="deptInfo.telZone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="9">
                            <el-form-item prop="phone">
                                <el-input v-model="deptInfo.phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="7">
                            <el-form-item prop="telExt">
                                <el-input v-model="deptInfo.telExt"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="deptInfo.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="隐藏本部门：" prop="isHidden">
                        <el-switch v-model="deptInfo.isHidden" :active-value="1" :inactive-value="0"></el-switch>
                        <div class="tips">开启后，无法从通讯录中看到该号码</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门员工仅可见自己：" prop="isUserShow">
                        <el-switch v-model="deptInfo.isUserShow" :active-value="1" :inactive-value="0"></el-switch>
                        <div class="tips">开启后，本部门员工默认只能看到自己；使用场景如：供应商之间相互不可见，不可见企业通讯录，但可见指定的人员</div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="foot">
            <div class="left">
                <el-button type="text" @click="closeLayout">关闭</el-button>
            </div>
            <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
    </right-layout>
</template>

<script>
import moment from 'moment';
import RightLayout from '@/components/layout/RightLayout';
import selectUser from '@/components/selectUser';
import selectDept from '@/components/selectDept';
import selectPara from '@/components/common/comp/selectPara';
import textLength from '@/components/textLength';
import {
    updateDeptTree,
    getDeptInfo,
} from "../../service.js";
import { mapState } from 'vuex'
import { commPara } from '@/mixins/mixins'
export default {
    components: { RightLayout, selectDept, selectPara, selectUser , textLength },
    props: {
        parentNode: { // 父级节点
            type: Object,
            default() {
                return {}
            }
        }
    },
    mixins: [ commPara ],
    data() {
        var validate_descr = (rule, value, callback) => {
            if(this.deptInfo.descr_l > 256) {
                callback(new Error());
            }else {
                callback()
            }
        }
        return {
            sysParaObj: {
                'SP_ORG_TYPE': [],
                'SP_QUES_STATUS': []
            },
            show: false,
            title: '',
            deptInfo: {
                id              : "",
                name            : "",
                code            : '', // 编号
                parentId        : "",
                parentName      : "",
                deptType        : "",
                deptTypeName    : "",
                descr           : "",
                descr_l         : 0,
                chargUserIds    : [],
                chargUserNames  : [],

                regAddress      : '', // 详细地址
                email           : '',
                telZone         : '',
                phone           : '',
                telExt          : '', 
                isHidden        : 0,
                isUserShow      : 0,
            },
            rules: {
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                    { min: 0, max: 20, message: "名称在 0 到 20 个字", trigger: "blur" }
                ],
                code: [
                    { min: 0, max: 40, message: '长度限制40位', trigger: 'change' },
                ],
                descr: [
                    { validator: validate_descr, message: '长度限制256位', trigger: 'blur' },
                ],
                regAddress: [
                    { min: 0, max: 64, message: '长度限制64位', trigger: 'change' },
                ],
                telZone: [
                    { min: 0, max: 5, message: '长度限制5位', trigger: 'change' },
                    { pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'change' },
                ],
                phone: [
                    { min: 0, max: 8, message: '长度限制8位', trigger: 'change' },
                    { pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'change' },
                ],
                telExt: [
                    { min: 0, max: 5, message: '长度限制5位', trigger: 'change' },
                    { pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'change' },
                ],
                email: [
                    { min: 0, max: 64, message: '长度限制64位', trigger: 'change' },
                ],
            },
            loading: false,
        };
    },
    computed: {
        ...mapState({
            token: state => state.token.token,
            tenementId: state => state.token.tenementId
        })
    },
    methods: {
        showLayout(data) {
            if(data) {
                this.title = "修改部门";
                this.deptInfo.id = data.id;
                this.deptInfoAjax();
            }
            this.show = true;
        },
        addTopNode() { // 新增一级机构
            this.title = "新增机构";
            this.deptInfo.id = '';
            this.deptInfo.parentId = '';
            this.deptInfo.parentName = '';
            this.show = true;
        },
        closeLayout() {
            this.deptInfo.id = '';
            this.resetForm();
            this.show = false;
        },
        resetForm() {
            if(this.deptInfo.id) {
                this.deptInfoAjax();
            }else {
                this.$refs.deptInfo.resetFields();
                this.deptInfo.parentId = this.parentNode.id;
                this.deptInfo.parentName = this.parentNode.name;
            }
        },
        deptInfoAjax(data) {
            let params = { id: this.deptInfo.id };
            getDeptInfo(params).then(response => {
                if (response.data.code == 1000) {
                    let data = response.data.data;
                    if(data) {
                        this.deptInfo.name = data.name;
                        this.deptInfo.code = data.code;
                        this.deptInfo.deptType = data.deptType;
                        this.deptInfo.deptTypeName = data.deptTypeName;
                        this.deptInfo.parentId = data.parentId;
                        this.deptInfo.parentName = data.parentName;
                        this.deptInfo.descr = data.descr;
                        this.deptInfo.chargUserNames = data.chargUserNames ? data.chargUserNames.split(',') : [];
                        this.deptInfo.chargUserIds = data.chargUserIds ? data.chargUserIds.split(',') : [];

                        this.deptInfo.regAddress = data.regAddress; // 详细地址
                        this.deptInfo.email = data.email;

                        [this.deptInfo.telZone, this.deptInfo.phone, this.deptInfo.telExt] = data.telPhone ? data.telPhone.split('-') : ['', '', ''];

                        this.deptInfo.isHidden = data.isHidden;
                        this.deptInfo.isUserShow = data.isUserShow;
                    }   
                }
            });
        },
        submitForm() {
            this.$refs["deptInfo"].validate(valid => {
                if (valid) {
                    let params = {
                        id            : this.deptInfo.id,
                        name          : this.deptInfo.name,
                        code          : this.deptInfo.code,
                        deptType      : this.deptInfo.deptType,
                        deptTypeName  : this.deptInfo.deptTypeName,
                        parentId      : this.deptInfo.parentId,
                        parentName    : this.deptInfo.parentName,
                        descr         : this.deptInfo.descr,
                        chargUserIds  : this.deptInfo.chargUserIds.join(),
                        chargUserNames: this.deptInfo.chargUserNames.join(),

                        regAddress    : this.deptInfo.regAddress, // 详细地址
                        email         : this.deptInfo.email,
                        telPhone      : `${this.deptInfo.telZone}-${this.deptInfo.phone}-${this.deptInfo.telExt}`,
                        isHidden      : this.deptInfo.isHidden,
                        isUserShow    : this.deptInfo.isUserShow,
                    }
                    this.loading = true;
                    updateDeptTree(params).then(response => {
                        if (response.data.code == 1000) {
                            let data = response.data.data;
                            this.$notify({
                                title: "提示",
                                message: "修改成功！",
                                type: "success"
                            });
                            this.$emit("updateNode", data);
                            this.closeLayout();
                        }
                        this.loading = false;
                    }).catch(error => {
                        this.loading = false;
                    })
                }
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.org-dept{
    padding-bottom: 100px;
    .line {
        text-align: center;
    }
}
</style>